<!--
 * @FileDescription: 搜索组件（弃置不用了）
 * @Author: 小威吃饱了
 * @Date: 2022/5/25
 * @LastEditors: 小威吃饱了
 * @LastEditTime: 2022/5/25
 -->
<template>
  <div class="scour">
		<div class="search-box">
		    <input @keyup.enter.native="search" class="search-txt" type='text' id='inp' placeholder="What are you looking for?"/>
		    <input v-on:click="search" class="search-btn" type='button' id='btn' value='&#xf002' />
		</div>
		<div>			
		</div>
	</div>
</template>

<script>
var oInp = document.getElementById('inp');
// var oBtn = document.getElementById('btn');
export default {
  name: 'Scour',
  data() {
    return {

    }
  },
  mounted(){
    this.keyDown() // 监听键盘
    },
  methods: {
    search:function() {
        var url = 'https://www.zfrontier.com/app/search/' + oInp.value;
	    window.open(url);
    }
  },
}
</script>

<style>
@font-face {
	font-family: 'FontAwesome';
	src: url('D:/project/shaft-atlas/node_modules/font-awesome/fonts/fontawesome-webfont.eot');
	src: url('D:/project/shaft-atlas/node_modules/font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
		url('D:/project/shaft-atlas/node_modules/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'), 
    url('D:/project/shaft-atlas/node_modules/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),
		url('D:/project/shaft-atlas/node_modules/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'),
		url('D:/project/shaft-atlas/node_modules/font-awesome/fonts/fontawesome-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
.scour {
    background-color: bisque;
    align-items: center;
}
.search-box {
  font-family:FontAwesome;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  height: 40px;
  border: 10px;
  border-radius: 40px;
  padding: 10px;
  opacity: 0;
  transition-delay: 99999999s;
  transition-duration: 1s;
}

.search-box:hover > .search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover > .search-btn {
  color: white;
  background: black;
}

.search-btn {
  transition: 0.5s;
  font-family: FontAwesome;
  font-size: 25px;
  color: black;
  float: right;
  width: 40px;
  height: 40px;
  border: 10px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: rgb(51, 159, 150);
  font-size: 16px;
  transition: 0.6s;
  line-height: 50px;
  width: 0px;
}

@keyframes flash {
  50% {
    transform: scale(1.5);
  }

  80% {
    transform: rotate(-60deg);
  }

  100% {
    transform: rotate(30deg);
  }
}
html:hover .search-box {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0s;
}
</style>
